<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul,
        ol {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul {
            display: flex;
        }

        ul>li:not(:last-child) {
            margin-right: 10px;
        }

        ul>li {
            cursor: default;
        }


        .container {
            width: 618px;
            padding: 10px;
            background-color: #000;
        }

        #videoContainer {
            /* width: 638px; */
            height: 256px;
            position: relative;
            overflow: hidden;
        }

        video {
            width: 100%;
        }

        #btnGroup {
            margin: 10px 0;
            color: #fff;
        }

        /* textarea {
            resize: none;
            width: 400px;
            margin: 10px;
        } */
        #playBtn {
            background: none;
            border: none;
            color: #fff;
        }

        .time {
            margin-right: auto !important;
        }

        input {
            outline: none;
        }


        #textWrap {
            display: flex;
            align-items: stretch;
        }

        #textarea {
            width: 228px;
            height: 28px;
        }

        #sendBtn {
            /* height: 28px; */
        }

        /* 倍速样式 */


        .speed {
            position: relative;
            /* font-size: 0; */
        }

        .speed>span {
            /* background: red; */
            /* font-size: 14px; */
        }

        .speed>div {
            position: absolute;
            left: -15px;
            bottom: 23px;
            padding-bottom: 10px;
            /* background-color: pink; */
        }

        .speed ol {
            background-color: rgba(0, 0, 0, .5);
            border-radius: 5px;
            text-align: center;
            display: none;
        }

        .speed li {
            /* margin-bottom: 5px; */
            padding: 5px 10px;
        }

        .speed li:hover {
            /* background-color: rgba(#fff, #fff, #fff, 1); */
            background-color: rgba(#fff, #fff, #fff, 0.5) !important;
            /* background-color: #fff; */
            /* opacity: 0.2; */
            /* color: red; */
        }

        /* 音量 */

        #rag {
            position: relative;
        }

        #rag>div {
            background-color: red;
            position: absolute;
            bottom: 78px;
            left: -50px;
            padding-left: 10px;

            display: none;
        }

        #rag #range {
            position: absolute;
            transform: rotate(-90deg);
            left: 0;
            top: -20px;
        }

        #ragDiv>span {
            position: absolute;
            top: -95px;
            left: 60px;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class='container'>
        <!-- 视频显示区域 -->
        <div id='videoContainer'>
            <video src="./iceage4.mp4" id='video'></video>
        </div>
        <!-- 功能操作区域 -->
        <div id='btnGroup'>
            <ul>
                <li>
                    <!-- 播放、暂停按钮 -->
                    <input type="button" value='播放' id='playBtn'>
                </li>
                <li class='time'>
                    <time id='time'>0:0 / 0:0</time>
                </li>
                <li class='speed' id='speed'>
                    <span>倍速</span>
                    <div>
                        <ol id='speedMenu'>
                            <li>2.0x</li>
                            <li>1.5x</li>
                            <li>1.25x</li>
                            <li>1.0x</li>
                            <li>0.75x</li>
                            <li>0.5x</li>
                        </ol>
                    </div>
                </li>
                <li id='rag'>
                    <span>音量</span>
                    <div id='ragDiv'>
                        <span id='volume'></span>
                        <input type="range" name="" id="range">
                    </div>
                </li>
                <li id='fullScreen'>全屏</li>
            </ul>
        </div>
        <!-- 弹幕操作区域 -->
        <div id='textWrap'>
            <input type="text" id="textarea">
            <input type="button" value='发送' id='sendBtn'>
        </div>
    </div>
    <script src="./js.js"></script>
</body>

</html>